<template>
  <div class="container">
    <Navbars ></Navbars>
    <!-- 条件 -->
    <div class="querydiv" shadow="never">
      <el-form :inline="true" size="medium" label-width="70px">
        <el-form-item label="">
          <el-select-tree popper-class="stafftree" :popper-append-to-body="false"
              clearable style="width:100%" :highlight-current="true" 
              :props="defaultProps" 
              :default-expand-all="false" placeholder="请选择版本" :data="versionList" :show-checkbox="true" :check-strictly="true"
              v-model="listQuery.vid" 
          ></el-select-tree>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="listQuery.icdName" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="listQuery.icdCode" placeholder="编码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="btn btncolor" type="primary" @click="getList">查询</el-button>
          <el-button class="btn" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="mt15">
      <el-card class="tab-card" shadow="never">
        <div slot="header" class="spacebetween disflex align-center">
          <span style="color:#676a6f;font-size:14px">ICD-10管理列表</span>
          <div>
              <el-button class="btn btncolor" icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
              <el-button class="btn btncolor" type="primary" @click="handleAdd">映射管理</el-button>
              <el-button class="btn" @click="isvisible = false">导入</el-button>
              <el-button class="btn" @click="isvisible = false">导出</el-button>
          </div>
        </div>
        <el-table :data="tableData" :header-cell-style="{background:'#e4ebfd',color:'#76100db'}" :row-class-name="tableRowClassName"
            default-expand-all row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column align="center" prop="vid"  label="版本" ></el-table-column>
            <el-table-column align="center" prop="pinyin"  label="拼音" ></el-table-column>
            <el-table-column align="center" prop="icdName"  label="名称" ></el-table-column>
            <el-table-column align="center" prop="icdCode" label="编码"></el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
            <el-table-column align="center" fixed="right"  label="操作">
              <template slot-scope="scope">
                <el-button type="text"  class="edit" @click="handlEdit(scope.row)">编辑</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="text" @click="handleDel(scope.row)" class="del">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!--分页 -->
      <Pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.num"></Pagination>
    </div>
    <!-- 新增修改 -->
    <el-dialog :title="title" :visible.sync="isvisible" width="40%" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="60px">
        <el-form-item label="版本" prop="vid">
          <el-select-tree popper-class="stafftree" :popper-append-to-body="false"
              clearable style="width:100%" :highlight-current="true" 
              :props="defaultProps" 
              :default-expand-all="false" placeholder="请选择版本" :data="versionList" :show-checkbox="true" :check-strictly="true"
              v-model="addForm.vid" 
          ></el-select-tree>
        </el-form-item>
        <el-form-item label="拼音">
          <el-input v-model="addForm.pinyin"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="icdName">
          <el-input v-model="addForm.icdName"></el-input>
        </el-form-item>
        <el-form-item label="编码" prop="icdCode">
          <el-input v-model="addForm.icdCode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitAdd('addForm')" class="btncolor" size="small" :loading="loading" :disabled="loading">确定</el-button>
          <el-button @click="isvisible = false" size="small">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {versionpage, icd10page,icd10add,icd10detail,icd10update,icd10del } from '@/api/icd.js'

import Pagination from '@/components/Pagination'
import {buildTree} from '@/utils/index'
export default {
  name: 'user',
  components: { Pagination },
  data() {
    return {
      total: 0,
      listLoading: true,
      listQuery: {
        page:1,
        num:10,
        pinyin:'',
        icdName:'',
        icdCode:'',
        vid:''
      },
      versionList:[],
      tableData: [],
      addForm:{
        vid:'',
        icdName:'',
        icdCode:'',
        pinyin:''
      },
      defaultProps: {
        parent: 'pid',   // 父级唯一标识
        value: 'id',          // 唯一标识
        label: 'name',       // 标签显示
        children: 'children', // 子级
      }, // 配置
      title:'新增ICD10',
      isvisible:false,
      loading:false,
        addRules: {
          icdName: [
            { required: true, message: '请输入名称', trigger: 'blur' },
          ],
          icdCode: [
            { required: true, message: '请输入编码', trigger: 'blur' },
          ],
          vid:[
            { required: true, message: '请输选择版本', trigger: 'blur' },
          ]
        },
    }
  },
  created() {
    // this.getorgTreeList()
    this.getList()
    this.getVersinList()
  },
  methods: {
    // 设置表格颜色
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2==0) { return 'warning-row'}
      return '';
    },
    // 获取版本列表
    getVersinList(){
        let data = {
            page:1,
            num:1000,
        }
        this.$getFlag().then(obj=>{
            versionpage(data,obj.data).then(res=>{
                if(res.status == 200){
                    this.listQuery.vid = res.list[0].id
                    this.versionList = buildTree(res.list)
                }
            })
        })
    },
    // 获取表格列表信息
    getList() {
      this.$getFlag().then(obj=>{
        this.listLoading = false
        icd10page(this.listQuery,obj.data).then(response => {
          this.tableData = response.list
          this.total = Number(response.total)
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      })
    },
    // 新增弹窗
    handleAdd() {
      this.addForm = {}
      this.isvisible = true
      this.title = "新增ICD10"
    },
    // 新增修改确定
    onSubmitAdd(formName){
      if(!this.addForm.vid){
        this.$notify({ title: "操作失败",message: "请选择版本", type: "error", duration: 2000,});
        return false
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.title=='新增ICD10'){
            this.$getFlag().then(obj=>{
              icd10add(this.addForm,obj.data).then(res=>{
                if(res.status == 200){
                  this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
                  this.getList()
                  this.isvisible = false
                }else{
                  this.$notify({ title: "操作失败",message: res.error, type: "error", duration: 2000,});
                }
              })
            })
          }else{
            this.$getFlag().then(obj=>{
              icd10update(this.addForm,obj.data).then(res=>{
                if(res.status == 200){
                  this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
                  this.getList()
                  this.isvisible = false
                }else{
                  this.$notify({ title: "操作失败",message: res.error, type: "error", duration: 2000,});
                }
              })
            })
          } 
        }else{
          this.$notify({ title: "操作失败",message: '请完成必填项！', type: "error", duration: 2000,});
        }
      })
    },
    // 编辑弹窗 获取详情
    handlEdit(row){
      this.isvisible = true
      this.title = "编辑ICD10"
      this.$getFlag().then(obj=>{
        icd10detail({id:row.id},obj.data).then(res=>{
          if(res.status == 200){
            this.addForm = res.data
          }
        })
      })
    },
    // 删除
    handleDel(row){
      this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        this.$getFlag().then(obj=>{
          icd10del({id:row.id},obj.data).then(res=>{
              if(res.status == 200){
                this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
                this.getList()
              }else{
                this.$notify({ title: "操作失败",message: res.msg, type: "error", duration: 2000,});
              }
          })
        }) 
      })
      .catch(() => {});
    },
    //重置
    handleReset(){
      this.listQuery.pid = ""
      this.listQuery.name = ""
      this.listQuery.code = ""
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .stafftree .el-tree-node__content .el-checkbox .el-checkbox__input {
  display: none;
}
</style>
<style>
  .el-table .warning-row {
    background-color: '#f6f10fe';
  }
</style>
